<template>
  <view class="container">
    <view class="form-group">
      <view class="form-item">
        <text>队伍名称：</text>
        <u-input v-model="teamName" placeholder="请输入队伍名称"/>
      </view>
      <view class="form-item">
        <text>报名人数：</text>
        <input type="number" v-model="count" @change="updateMembers"/>
      </view>
      <view v-for="(member, index) in members" :key="index" class="member-info">
        <text>成员{{index + 1}}：</text>
        <view class="input-group">
          <input v-model="member.sid" placeholder="学号" @input="onInput(index)" />
          <u-input v-model="member.userName" placeholder="姓名"/>
          <u-input v-model="member.className" placeholder="班级"/>
          <u-input v-model="member.college" placeholder="学院"/>
          <u-input v-model="member.phone" placeholder="手机号"/>
          <u-input v-model="member.email" placeholder="邮箱"/>
          <view class="radio-group">
            <radio-group @change="radioChange">
              <label>
                <radio value="1" :checked="member.sex === '1'"/>男
              </label>
              <label>
                <radio value="0" :checked="member.sex === '0'"/>女
              </label>
            </radio-group>
          </view>
        </view>
      </view>
    </view>
    <view class="btn-group">
      <u-button @click="submitForm" type="primary">提交报名信息</u-button>
    </view>
  </view>
</template>

<script>
export default {
  onLoad(option){
    this.name = option.name; 
    this.count = option.groupNumber;
  },
  onShow() {
    this.updateMembers();
  },
  data() {
    return {
      debounceTimer: null,
      debounceDelay: 500,
      name:'',
      teamName: '',
      count: 1,
      members: [{
        userName: '',
        sex: '1',
        className: '',
        sid: '',
        college: '',
        phone: '',
        email: ''
      }]
    }
  },
  methods: {
    radioChange(e) {
      this.sex = e.detail.value;
    },
    onInput(index) {
      clearTimeout(this.debounceTimer);
      this.debounceTimer = setTimeout(() => {
        this.getStudentInfo(this.members[index].sid,index);
      }, this.debounceDelay);
    },
    getStudentInfo(studentId,index) {
      this.$H.get(`user/studentInfo/${studentId}`).then(response => {
        if (response.result) {
          const member = this.members[index];
          const result = response.result;
          member.userName = result.userName;
          member.phone = result.phone;
          member.college = result.college;
          member.className = result.className;
          member.sex = result.sex.toString();
          member.email = result.email;
        }
      }).catch(error => {
        console.error(error);
      });
    },
    updateMembers() {
      const diff = this.count - this.members.length;
      if (diff > 0) {
        for (let i = 0; i < diff; i++) {
          this.members.push({
            userName: '',
            sex: '1',
            className: '',
            sid: '',
            college: '',
            phone: '',
            email: '',
          });
        }
      } else if (diff < 0) {
        this.members.splice(this.count);
      }
    },
    submitForm() {
       if ( this.count &&this.name && this.teamName ) {
          const formData = {
          count: this.count,
          raceName: this.name,
          teamName: this.teamName,
          list: this.members.slice(0,this.count)
        };
       } else {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
      }

      uni.request({
        url: 'https://icpc.zut.edu.cn/app/user/teamsave',
        method: 'POST',
        data: formData,
        success: (res) => {
          uni.showToast({
            title: res.data.msg,
            icon: 'success'
          });
        },
        fail: (err) => {
          uni.showToast({
            title: err,
            icon: 'none'
          });
          console.error('提交失败', err);
        }
      });
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.form-group {
  margin-bottom: 20rpx;
}

.form-item {
  margin-bottom: 10rpx;
}

.member-info {
  margin-bottom: 20rpx;
}

.input-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.radio-group {
  margin-top: 10px;
}

.btn-group {
  text-align: center;
}
</style>
